<template>
  <div
    class="flex flex-col w-full p-1 bg-white mb-2 text-sm border-2 rounded"
    :class="getOrderColor(item.orderStatus)"
  >
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-x-2">
        订单号：<span class="text-sm">{{ item.orderNo }}</span>
        <CopyBtn :text="item.orderNo" :size="{ width: '20px', height: '20px' }" />
      </div>
      <div>状态：{{ getOrderStatus(item.orderStatus) }}</div>
    </div>
    <div class="flex items-center gap-x-4">
      <div>
        订单金额：<span class="text-red-500">{{ item.amount }}</span>
      </div>
      <div>
        实付金额：<span class="text-red-500">{{ item.money }}</span>
      </div>
      <div>
        付款人姓名：<span class="text-red-500">{{ item.input }}</span>
      </div>
    </div>
    <div class="space-y-1">
      <div class="flex items-center gap-x-5">
        <div class="my-1">
          收款通道：
          <img :src="item.icoImg" alt="icon" class="w-6 h-6 inline-block" />
          <span class="w-12 h-12 p-1">{{ item.codeTitle }}</span>
        </div>
        <div>
          返佣：<span class="text-red-500">{{ item.agentGain }}</span>
        </div>
      </div>

      <div v-if="item.codeTitle.search('数字人民币') != -1">钱包编码：{{ item.code }}</div>
    </div>
    <div class="flex items-center gap-x-2">
      <div
        v-if="item.collectionInput.length > 0"
        :key="input.id"
        v-for="input in item.collectionInput"
      >
        {{ input.title }}: {{ input.value }}
      </div>
      <div v-else :key="'info' + input.id" v-for="input in item.paymentInfo">
        {{ input.title }}: {{ input.value }}
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div>创建时间：{{ dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
      <button
        class="p-1 text-sm text-center bg-red-900 border font-bold border-black rounded text-white"
        v-if="item.orderStatus === 2"
        @click="ReviewReceipt(item.orderNo)"
      >
        异常补单
      </button>

      <button
        class="p-1 text-sm text-center bg-red-900 border font-bold border-black rounded text-white"
        v-if="item.orderStatus === 3"
        @click="ReviewReceipt(item.orderNo)"
      >
        取消重补
      </button>

      <button
        class="p-1 text-sm text-center bg-red-500 border font-bold border-black rounded text-white"
        v-if="item.orderStatus === 1"
        @click="ReviewOrder(item.orderNo)"
      >
        超时补单
      </button>

      <button
        v-if="item.orderStatus === 0"
        class="p-1 text-sm text-center bg-yellow-500 border border-black rounded text-block"
        @click="confirmOrder(item.orderNo)"
      >
        我已收到
      </button>
    </div>
    <div class="mt-2" v-if="item.orderStatus === 0 || item.orderStatus === 1">
      <div class="w-full h-1 bg-gray-200 rounded-full">
        <div class="h-1 bg-green-300 rounded-full" :style="{ width: prosess + '%' }"></div>
      </div>
      <div class="mt-1 text-sm text-center text-gray-400">
        请在 {{ countDown }} 秒内 {{ removeTag(bottomInfo.content) }}
      </div>
    </div>

    <div class="mt-2" v-else>
      <div class="w-full h-1 bg-gray-200 rounded-full">
        <div class="h-1 bg-green-300 rounded-full" :style="{ width: '0%' }"></div>
      </div>
      <div class="mt-1 text-sm text-center text-gray-400">
        {{ removeTag(bottomInfo.content) }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { getOrderStatus } from '@/utils/order'
import {
  ConfirmReceiptApi,
  ReviewReceiptApi,
  OrderInfoApi,
  ReviewOrderApi
} from '@/apis/collection'
import { showNotify, showConfirmDialog, showLoadingToast, closeToast } from 'vant'
import { onMounted, ref } from 'vue'
import CopyBtn from '@/components/CopyBtn.vue'
import { getCache } from '@/utils/cache'

const emit = defineEmits(['ok', 'endTime'])

const orderInfo = ref({})
const countDown = ref(0)
const prosess = ref(0)
const bottomInfo = ref({
  title: '',
  content: ''
})

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})

function removeTag(str: string) {
  return str.replace(/<[^>]*>/g, '')
}

onMounted(async () => {
  const reminder = getCache('app_order_item_bottom_' + getOrderStatus(props.item.orderStatus))
  bottomInfo.value = reminder

  const response = await OrderInfoApi({ orderNo: props.item.orderNo })
  orderInfo.value = response

  countDown.value = response.endTime

  if (countDown.value > 0) {
    countDown.value--
    prosess.value = (1 - countDown.value / orderInfo.value.totalTime) * 100
  }

  countDownFunc()
})

function getOrderColor(status: number) {
  switch (status) {
    case 0:
      return 'border-yellow-500'
    case 1:
      return 'border-red-500'
    case 2:
      return 'border-blue-600'
    case 3:
      return 'border-gray-900'
  }
}

function countDownFunc() {
  setTimeout(() => {
    if (countDown.value > 0) {
      countDown.value--
      prosess.value = (1 - countDown.value / orderInfo.value.totalTime) * 100
      countDownFunc()
    } else {
      emit('endTime')
      return
    }
  }, 1000)
}

async function confirmOrder(orderNo: string) {
  showConfirmDialog({
    title: '提示',
    message: '确定已收到吗？'
  }).then(async () => {
    showLoadingToast({ duration: 0, message: '处理中...' })
    const response = await ConfirmReceiptApi({ orderNo })
    if (response) {
      showNotify({ type: 'success', message: '确认成功' })
      emit('ok')
    }
    closeToast()
  })
}

async function ReviewOrder(orderNo: string) {
  showConfirmDialog({
    title: '提示',
    message: '确定要补单吗？'
  }).then(async () => {
    showLoadingToast({ duration: 0, message: '处理中...' })
    const reponse = await ReviewReceiptApi({ orderNo })
    if (reponse) {
      showNotify({ type: 'success', message: '补单成功' })
      emit('ok')
    }
    closeToast()
  })
}

async function ReviewReceipt(orderNo: string) {
  showConfirmDialog({
    title: '提示',
    message: '确定要补单吗？'
  }).then(async () => {
    showLoadingToast({ duration: 0, message: '处理中...' })
    const reponse = await ReviewOrderApi({ orderNo })
    if (reponse) {
      showNotify({ type: 'success', message: '补单成功' })
      emit('ok')
    }
    closeToast()
  })
}
</script>
